<template>
    <!--登录-->
    <div class="login">
        <!--<van-nav-bar-->
                <!--:fixed="fixed"-->
                <!--title="登录"-->
        <!--/>-->
        <div class="login-img">
            <img src="../../static/login.png"
                 style="height: 48px;width: 48px"
            />
            <h4 class="header_tit_txt">帐号登录</h4>
            <!--用户名登录-->
            <div class="input-name">
                    <van-cell-group>
                        <van-field
                                v-model="username"
                                clearable
                                label="用户名"
                                placeholder="请输入用户名"
                        />

                        <van-field
                                v-model="password"
                                type="password"
                                label="密  码"
                                placeholder="请输入密码"
                        />
                    </van-cell-group>
                    <div :style="{padding:'10px',marginTop:'10px'}">
                        <van-button size="large" @click="showData">登录</van-button>
                    </div>
                <ul class="list-inline" style="text-align: center;">
                    <li @click="register">立即注册</li>
                    <li @click="ForgetPassword"> 忘记密码？</li>
                </ul>
            </div>
        </div>
        <div :style="{height: '170px'}"></div>
    </div>
</template>

<script>
    import {login} from "../api/data";
    import Vue from 'vue'
    import { Toast } from 'vant';
    Vue.use(Toast);
    export default {
        data() {
            return {
                //输入的数据
                fixed:true,
                username:'',
                password:'',
            }
        },
        methods: {
            register(){//立即注册
                this.$router.push({
                    path:`/register`
                })
            },
            ForgetPassword(){//忘记密码
                this.$router.push({
                    path:`/forgetpassword`
                })
            },
            onClickLeft() {
                this.$router.back()
            },
            showData() {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                if (reg.test(this.username)) {
                    //手机号对的时候操作
                    let username = this.username
                    let password = this.password
                    if(password.length<1){
                        Toast('请输入密码')
                    }else{
                        login(username,password).then(res=>{
                            console.log(res.data)
                            let that = this
                            if (res.data.msg == '密码不正确!') {
                                Toast('密码不正确')
                            }
                            if(res.data.msg == '用户不存在!'){
                                Toast('您还没有注册，赶紧注册吧！')
                            }
                            if(res.data.msg == '登录成功!'){
                                localStorage.setItem("token",res.data.data.token)
                                let user = JSON.stringify(res.data.data.user)
                                localStorage.setItem("user",user)
                                Toast('登录成功！')
                                this.$router.push({path:`/home`})
                            }
                        })
                    }
                }else {
                    Toast('请输入正确的手机号！')
                }
            }
        },
        created(){

            if (localStorage.getItem('token')) {
                this.$router.push({
                    path:`/home`
                })
            }
        }
    }
</script>

<style scoped>
    .list-inline li {
        display: inline-block;
        float: none !important;
    }

    .mobile-login {
        color: #A39191;
        display: flex;
        width: 98%;
        height: 60px;
        font-size: 20px;
    }

    .login-img ul li {
        margin-top: 5px;
        float: left;
        list-style: none;
        color: #EF5B00;
    }

    .input-name form input {
        border: none;
        outline: none;
        padding: 10px 0px;
        width: 99%;
        height: 50px;
        font-size: 18px;
    }

    .header_tit_txt {
        font-size: 18px;
        padding: 13px 0px;
        color: #424242;
        font-weight: normal;
    }

    .model {
        width: 49px;
        height: 48px;
        margin: 0 auto;
        display: block;
    }

    .login {
        margin: 0 auto;
        width: 100%;
        height: 100%;
    }

    .login-img {
        margin-top: 86px;
        width: 100%;
        height: 450px;
        text-align: center;
    }
</style>
